<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>

<div id="app">
    <input type="button" value="更新数据" @click="update">
    <input type="button" value="销毁组件" @click="des">

    {{msg}}

</div>

<script>
    new Vue({
        data:{
            msg:'我是一个信息'
        },
        methods:{
            update(){
                this.msg = '改变了'
            },
            des(){
                this.$destroy()
            }
        },
        beforeCreate(){
            alert('组件实例刚刚被创建'); //属性都没有
        },
        created(){
            alert('实例已经创建完成');  //属性已经绑定，但是没有生成dom树
        },
        beforeMount(){
            alert('模板编译之前');
        },
        mounted(){
            alert('模板编译之后')
        },
        beforeUpdate(){
            alert('组件更新之前')
        },
        updated(){
            alert('组件更新完毕')
        },
        beforeDestroy(){
            alert('销毁之前')
        },
        destroyed(){
            alert('销毁之后')
        }
    }).$mount('#app')
</script>

</body>
</html>